<template>
  <div class="todoList" >

    <div class="header">
      <div class="header-left">
        <div class="header-left-add">+</div>
        <input class="header-left-div" type="text" placeholder="待办事项" v-model="content"/>
      </div>
      <div class="header-right">
        <button class="header-right-add" @click="add">添加</button>
      </div>
    </div>

    <div class="content">

      <div class="item" v-for="item in todoList" :key="item.id">

        <!--选中，完成勾选-->
        <div class="item-left" @click="pick(item)">
          <span class="item-span" 
            :style="item.isPicked ? 'opacity : 1' : 'opacity : 0'"></span>
        </div>        

        <!--事项内容-->
        <div 
          type="text" 
          class="item-input"
          :disabled="item.isPicked"
          :class="item.isPicked ? 'line-through' : '' "> 
        {{item.content}}
        </div>

        <!--基本信息-->
        <div class="item-right">
          <button class="item-button" @click="del(item.id)">删除</button>
        </div>

      </div>

    </div>

  </div>
</template>

<script>

import axios from "axios"
import dayjs from "dayjs"

export default {
  name: 'App',
  data(){
    return{
      content:"",
      todoList:[]
    }
  },

  //初始化，从本地数据库中取数
  created(){
    this.get()
  },

  methods:{

    //获取列表
    get(){
      axios.get('http://127.0.0.1:80/list/all').then(res=>{
        console.log(res.data);
        if(res.data == null){
          this.todoList.push({
            id: 0,
            content:"请输入待办事项后点击上方的添加按钮添加事项",
            time: dayjs(new Date).format('YY-MM-DD'),
            isPicked: 0,
            isDelete: 0
          })
        }
        else{
          this.todoList = res.data
        }
      }).catch(err=>{
        console.log("获取失败" + err);
      })
    },


    //添加事项
    add() {   //添加操作
      axios.get('http://127.0.0.1:80/list/add',{
        params: {
          content: this.content
        }
      }).then(res=>{
        // console.log(res.data);
        if(res.data.status == 200) {
          this.get()
        }else{
          this.$message({
          message: '添加失败',
          type: 'error'
        });
        }
      }).catch(err=>{
          console.log("操作失败" + err);
      })
      this.content=""
    },



    //删除事项
    del(itemId) {    //删除操作
      axios.get('http://127.0.0.1:80/list/del',{
        params: {
          id: itemId
        }
      }).then(res=>{
        // console.log(res.data);
        if(res.data.status == 200) {
          this.get()
        }else{
          this.$message({
          message: '删除失败',
          type: 'error'
        });
        }
      }).catch(err=>{
          console.log("操作失败" + err);
      })
    },

    //勾选事项
    pick(item){
      axios.get('http://127.0.0.1:80/list/update',{
        params: {
          id: item.id,
          isPicked: 1
        }
      }).then(res=>{
        if(res.data.status == 200) {
          this.get()
        }else{
          this.$message({
          message: '修改失败',
          type: 'error'
        });
        }
      }).catch(err=>{
          console.log("操作失败" + err);
      })
    }

   
    
  }

}
</script>

<style>

button{
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  color: #fff;
}

.todoList{
  width: 800px;
  height: 600px;
  background: #3c3e4f;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
}

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: #ccc 1px solid;
}

.header-left{
  display: flex;
  align-items: center;
}

.header-left-add{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #9999E6;
  font-size: 30px;
  text-align: center;
  margin-right: 15px;
  margin-bottom: 10px;
}

.header-left-div{
  width: 550px;
  height: 40px;
  font-size: 24px;
  text-align: center;
  margin-right: 15px;
}

.header-right{
  display: flex;
  align-items: center;
}

.header-right-add{
  width: 100px;
  height: 35px;
  font-size: 20px;
  background: #70B870;
}

.content{
  margin-top: 20px;
  height: 450px;
  overflow-y: scroll;
}

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #6B6F7D;
  border-radius: 8px;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 20px;
}

.item-left{
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: relative;
}

.item-span{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.item-input{
  flex: 1;
  margin: 0 10px;
  outline: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
  color: #fff;
}

.item-right{
  display: flex;
  align-items: center;
}

.item-button{
  background: #C43F38;
}

.line-through{
  color: rgba(255, 255, 255, 0.3); 
  text-decoration: line-through rgba(255, 255, 255, 0.8); 
}


</style>
